<template>
	<view>
		<!-- pages/user/assets/index.wxml -->
		<navbar></navbar>
		<view class="container">
			<view class="header">
				<view class="header-Icon">
					<image src="../../../static/images/orderTitle.png"></image>
				</view>
				<view class="header-container">

					<view class="tab-list dis-flex">
						<view v-for="(item, index) in tab.list" :key="item.id"
							:class="'tab' +  (tab.current == index ? ' active' : '')"
							@tap.stop.prevent="onToggleTab(index)">
							{{ item.title }}
						</view>
					</view>
				</view>
				<!-- <view class="header-placeholder" :class="{'header-placeholder--270h': canIUseCompose}"></view> -->
				<view class="header-placeholder" :class="{'header-placeholder--200h': canIUseCompose}"></view>
			</view>

			<view v-if="0 < leftlist.length" class="assetsBox">
				<view class="assetsBox-left">
					<view class="assetsBox-item" v-for="item in leftlist" :key="item.order_id"
						@tap.stop.prevent="onAssetsTaped(item)">
						<!-- <tag text="冻结" v-show="item.is_frozen"></tag> -->
						<view :class="['goods__img-wrapper', {'multi' : 1 < item.num}]">
							<easy-loadimage class="goods__img" mode="aspectFill" :scroll-top="scrollTop"
								:image-src="item.goods_image" borderRadius="16rpx"></easy-loadimage>
							<view v-if="1 < item.num" class="assets__num f-28">×{{ item.num }}</view>
							<view v-if="item.is_sale == 1" class="assets__type f-28">寄售中</view>
							<view v-if="item.is_frozen == 1" class="assets__type f-28">已锁仓</view>
							<!-- <view v-else="item.is_frozen == 1" class="assets__type f-28">已锁仓</view> -->
							<!-- <view v-else="1 < item.num" class="assets__type f-28">已锁仓</view> -->
						</view>
						<view class="assets-name">
							<view class="assets__name-text">{{ item.goods_name }}</view>
						</view>
						<view class="box" v-if="tab.current !=1 && item.num == 1">
							<view class="assets-name  assets-bg" style="margin-left: 0;">
								<!-- <view class="assets-name  assets-bg"  v-if="tab.list.id  || 1 >= item.num " > -->
								<view style="display: flex;">
									<view class="assets_numbera">编号</view>
									<view class="assets_number">{{ item.sort_no }}</view>
								</view>
								<view style="display: flex;">
									<view class="assets_numbera">流通</view>
									<view class="assets_number">{{ item.market_num }}</view>
								</view>

							</view>
							<view class="data-item-name-icon">
								<!-- 1--孵化 -->
								<view class="image" v-show="item.is_upgrade == 1" @tap.stop.prevent="onCompose(item)">
									孵化
								</view>
								<!-- <image  src="../../../static/upgradeImg.png" ></image> -->
								<!-- <image v-show="item.is_upgrade == 2" src="../../../static/user/upgradeImg1.png" ></image> -->
							</view>
						</view>
						<view class="marker" v-show="item.is_upgrade == 1 && item.num != 1">
							<view style="display: flex;">
								<view class="assets_numbera">流通</view>
								<view class="assets_number">{{ item.market_num }}</view>
							</view>
							<view class="image" @tap.stop.prevent="onCompose(item)">
								孵化
							</view>
						</view>
						<!-- <view class="assets-name " v-if="1 == item.num">
							购入价:<view class="total_price">￥{{ item.total_price}}</view>
						</view> -->
						<view style="display: flex;font-size: 26rpx;margin-bottom: 10rpx;" v-show="item.is_upgrade != 1 && item.num != 1">
							<view class="assets_numbera">流通</view>
							<view class="assets_number">{{ item.market_num }}</view>
						</view>
					</view>
				</view>


				<view class="assetsBox-right">
					<view class="assetsBox-item" v-for="item in rightlist" :key="item.order_id">
						<!-- <tag text="冻结" v-show="item.is_frozen"></tag> -->
						<view :class="['goods__img-wrapper', {'multi' : 1 < item.num}]"
							@tap.stop.prevent="onAssetsTaped(item)">
							<easy-loadimage class="goods__img" mode="aspectFill" :scroll-top="scrollTop"
								:image-src="item.goods_image" borderRadius="16rpx"></easy-loadimage>
							<view v-if="1 < item.num" class="assets__num f-28">×{{ item.num }}</view>
							<view v-if="item.is_sale == 1" class="assets__type f-28">寄售中</view>
							<view v-if="item.is_frozen == 1" class="assets__type f-28">已锁仓</view>
							<!-- <view v-else="item.is_frozen == 1" class="assets__type f-28">已锁仓</view> -->
							<!-- <view v-else="1 < item.num" class="assets__type f-28">已锁仓</view> -->
						</view>
						<view class="assets-name">
							<view class="assets__name-text">{{ item.goods_name }}</view>
						</view>
						<view class="box" v-if="tab.current !=1 && item.num == 1">
							<view class="assets-name  assets-bg" style="margin-left: 0;">
								<!-- <view class="assets-name  assets-bg"  v-if="tab.list.id  || 1 >= item.num " > -->
								<view style="display: flex;">
									<view class="assets_numbera">编号</view>
									<view class="assets_number">{{ item.sort_no }}</view>
								</view>
								<view style="display: flex;">
									<view class="assets_numbera">流通</view>
									<view class="assets_number">{{ item.market_num }}</view>
								</view>
							
							</view>
							<view class="data-item-name-icon">
								<!-- 1--孵化 -->
								<view class="image" v-show="item.is_upgrade == 1" @tap.stop.prevent="onCompose(item)">
									孵化
								</view>
								<!-- <image  src="../../../static/upgradeImg.png" ></image> -->
								<!-- <image v-show="item.is_upgrade == 2" src="../../../static/user/upgradeImg1.png" ></image> -->
							</view>
						</view>
						<view class="marker" v-show="item.is_upgrade == 1 && item.num != 1">
							<view style="display: flex;">
								<view class="assets_numbera">流通</view>
								<view class="assets_number">{{ item.market_num }}</view>
							</view>
							<view class="image" @tap.stop.prevent="onCompose(item)">
								孵化
							</view>
							
						</view>

						<!-- <view class="assets-name " v-if="1 == item.num">
							购入价:<view class="total_price">￥{{ item.total_price}}</view>
						</view> -->
						<view style="display: flex;font-size: 26rpx;margin-bottom: 10rpx;" v-show="item.is_upgrade != 1 && item.num != 1">
							<view class="assets_numbera">流通</view>
							<view class="assets_number">{{ item.market_num }}</view>
						</view>
					</view>
				</view>
			</view>

			<view v-else="!loading && 0 == leftlist.length" class="yoshop-notcont">
				<text class="iconfont icon-wushuju"></text>
				<view class="cont">您还没有{{ tab.list[tab.current].tips }}</view>
			</view>
		</view>

		<template v-if="showDialog">
			<view class="mask"></view>
			<view class="detail-dialog">
				<div class="top">
					<div class="image">
						<img :src="assetInfo.goods_image">
					</div>
					<div class="close" @tap="showDialog = false">X</div>
					<div class="info">
						<div class="title">{{ assetInfo.goods_name }}</div>
						<!-- <div class="tip" style="font-size: 26rpx;">共3个</div>
						<div class="tip">均价￥1321.33</div> -->
					</div>
				</div>
				<div class="tip">默认按编号排序</div>
				<scroll-view class="list" scroll-y="true" @scrolltolower="loadMore">
					<div class="list_item" v-for="(item, index) in ownerAssets.list" :key="index" @tap.stop.prevent="getDetail(item)">
						<div class="price">￥{{item.order_price}}</div>
						<div class="number">#{{item.sort_no}}/{{item.market_num}}</div>
					</div>
				</scroll-view>
				<!-- <img class="selectimg" src="../../../static/images/filter.png" alt=""> -->
			</view>
		</template>

	</view>
</template>

<script>
	import {
		canIUseCompose
	} from "@/module.js";
	import navbar from "@/components/navbar/navbar";
	import tag from '@/components/tag/index'
	import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue'
	import bottomSafeArea from '@/components/bottom-safe-area/index';
	// pages/user/assets/index.js
	const app = getApp();
	export default {
		components: {
			navbar,
			tag,
			easyLoadimage,
			bottomSafeArea,
		},
		data() {
			return {
				showDialog: false,
				assetInfo: {},
				ownerAssets: {
					page: 1,
					loading: false,
					hasMore: false,
					list: []
				},
				canIUseCompose: canIUseCompose,
				scrollTop: 0,
				list: [],
				leftlist: [],
				rightlist: [],
				loading: true,
				page: 1,
				hasMore: false,
				assetsName: '',
				tab: {
					list: [{
							title: '藏品',
							id: 0,
							type: 'collect',
							tips: ''
						},
						{
							title: '',
							id: 1,
							type: 'blind_box',
							tips: ''
						},
					],
					current: 0
				},
				easyLoadimage: {
					scrollTop: 50
				}
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.getAssetsName(() => {
				// this.tab.list[0].tips = this.assetsName;
				// this.tab.list[0].title = this.assetsName;
				// this.tab.list[0].tips = this.assetsName;
				this.requestData();
			});

			app.loginSuccessCallback = () => {
				this.requestData();
			};
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			// this.page = 1
			// this.list = []
			// this.requestData();
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			this.setData({
				page: 1
			});
			this.requestData(() => {
				uni.stopPullDownRefresh();
			});
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			if (this.hasMore && !this.loading) {
				this.requestData();
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			//跳转孵化
			goToUpgrade(e) {
				this.$Router.push({
					name: "GoodsCompose",
					params: {
						goods_id: e.is_upgrade_goods_id
					}
				})
			},
			getAssetsName(callback) {
				this.assetsName = '藏品';
				callback && callback();
				// 2022.5.13，直接返回藏品，下面接口暂时保留
				// app._get('page/name', null, (res) => {
				// 	if (1 == res.code) {
				// 		this.assetsName = res.data;
				// 	}
				// }, null, () => {
				// 	callback && callback();
				// })
			},
			

			//////// networking ////////
			requestData: function(complete) {
				this.setData({
					loading: true
				});

				app._get(
					'user.order/collectGroupList', {
						page: this.page,
						dataType: this.tab.list[this.tab.current].type
					},
					(res) => {
						if (1 == res.code) {
							let {
								page,
								list,
								leftlist,
								rightlist,
								hasMore
							} = this;

							if (1 == page) {
								list.length = 0;
								leftlist.length = 0;
								rightlist.length = 0;
							}

							let {
								data,
								total
							} = res.data.list;

							if (leftlist.length == 0) {
								let aaa = data.filter((v, index) => index % 2 == 0) //偶数
								let bbb = data.filter((v, index) => index % 2 !== 0) //奇数数
								console.log(aaa)
								console.log(data)
								hasMore = total > leftlist.length + rightlist.length;
								if (hasMore) {
									page++;
								}
								this.setData({
									page,
									leftlist: aaa,
									rightlist: bbb,
									hasMore
								});
								console.log(this.rightlist.length)
							} else {
								let totalNumber = leftlist.length + rightlist.length
								if (totalNumber % 2 == 0) { //偶数
									let aaa = data.filter((v, index) => index % 2 == 0) //偶数
									let bbb = data.filter((v, index) => index % 2 !== 0) //奇数数
									aaa = [...rightlist, ...aaa]
									bbb = [...leftlist, ...bbb]
									hasMore = total > leftlist.length + rightlist.length;
									if (hasMore) {
										page++;
									}
									this.setData({
										page,
										leftlist: bbb,
										rightlist: aaa,
										hasMore
									});
								} else {
									let aaa = data.filter((v, index) => index % 2 == 0) //偶数
									let bbb = data.filter((v, index) => index % 2 !== 0) //奇数数
									bbb = [...rightlist, ...bbb]
									aaa = [...leftlist, ...aaa]

									hasMore = total > leftlist.length + rightlist.length;
									if (hasMore) {
										page++;
									}
									this.setData({
										page,
										leftlist: aaa,
										rightlist: bbb,
										hasMore
									});
								}
							}

							// list = [...list, ...data];
							// hasMore = total > list.length;

							// if (hasMore) {
							// 	page++;
							// }
							// let leftlist = [];
							// let rightlist = [];
							// let abcd = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]

							// let leftlist = abcd.filter((v,index)=>index%2 !==0);
							// let rightlist = abcd.filter((v,index)=>index%3 );
							// console.log(leftlist,'leftlist')
							// console.log(rightlist,'rightlist')
							// if(list.length%2 == 0){
							// 	list.map((item,index)=>{
							// 		if(index==0 || index%2 == 0 ){
							// 			leftlist.push(item)
							// 		}else{
							// 			rightlist.push(item)
							// 		}
							// 	})
							// }else{
							// 	list.map((item,index)=>{
							// 		if(index==0 || index%2 == 0 ){
							// 			rightlist.push(item)
							// 		}else{
							// 			leftlist.push(item)
							// 		}
							// 	})
							// }


							// console.log(leftlist,'leftlist')
							// console.log(rightlist,'rightlist')

							// this.setData({
							// 	page,
							// 	leftlist,
							// 	rightlist,
							// 	hasMore
							// });
						}
					},
					null,
					() => {
						this.setData({
							loading: false
						});

						if (complete) {
							complete();
						}
					}
				);
			},
			// 切换tab
			onToggleTab(index) {
				if (this.tab.current != index) {
					this.tab.current = index;
					this.page = 1;
					uni.showLoading();
					this.requestData(() => {
						uni.hideLoading();
					});
				}
				console.log(this.tab.current, 'this.tab.current')
			},
			// 去合成
			onCompose(e) {
				uni.navigateTo({
					url: `/pages/user/compose/compose?goods_id=${e.is_upgrade_goods_id}`
				});
			},
			onAssetsTaped: function(assets) {
				console.log(assets)
				this.ownerAssets.goods_id = assets.goods_id
				this.getOwnerAssets()
				this.assetInfo.goods_image = assets.goods_image
				this.assetInfo.goods_name = assets.goods_name
				this.showDialog = true
				// let url = '';
				// if (1 < assets.num) {
				// 	let dataType = (1 == assets.blind_box) ? 'blind_box' : 'all';
				// 	url = `./list/list?goods_id=${assets.goods_id}&dataType=${dataType}`;
				// } else {
				// 	url = `./detail/detail?order_id=${assets.order_id}`;
				// }
				// if (this.tab.current == 1) {
				// 	let dataTypes = (1 == assets.blind_box) ? 'blind_box' : 'all';

				// 	if (1 < assets.num) {
				// 		uni.navigateTo({
				// 			url: `./luckilyBox/luckilyBox?goods_id=${assets.goods_id}&dataType=${dataTypes}`
				// 		});
				// 	} else {
				// 		uni.navigateTo({
				// 			url: `./detail/detail?order_id=${assets.order_id}`
				// 		});
				// 	}
				// } else {
				// 	uni.navigateTo({
				// 		url: url
				// 	});
				// }

			},

			loadMore() {
				if(this.ownerAssets.hasMore) {
					this.getOwnerAssets()
				}
			},
			getDetail: function(assets) {
				console.log('click', assets)
				uni.navigateTo({
					url: `./detail/detail?order_id=${assets.order_id}`,
					events: {
						someEvent:res=>{
							console.log('刷新数据')
							this.requestData();
						}
					}
				});
			},

			getOwnerAssets() {
				app._get(
					'user.order/collectListDetail', Object.assign({}, {
						page: this.ownerAssets.page,
						goods_id: this.ownerAssets.goods_id
					}), (res) => {
						if (1 == res.code) {
							let {
								page,
								list,
								hasMore
							} = this.ownerAssets;
							if (1 == page) {
								list.length = 0;
							}
							let {
								data,
								total
							} = res.data.list;
							list = [...list, ...data];
							hasMore = total > list.length;
			
							if (hasMore) {
								page++;
							}
			
							this.ownerAssets.page = page;
							this.ownerAssets.list = list;
							this.ownerAssets.hasMore = hasMore;
						}
					},
				)
			},
		}
	};
</script>
<style>
	page {
		background: #F6F6F6 !important;
	}
	
</style>
<style lang="scss" scoped>
	.header {
		background: $uni-bg-color-grey;
	}

	.header-Icon {
		width: 100%;
		height: 32rpx;
		// background-image: url(@/static/images/orderTitle.png);
		// background-size: 100% 100%; 
		position: fixed;
		top: 0;
		z-index: 40;
		background: #FFF;
	}

	.header-Icon image {
		width: 100%;
		height: 100%;
	}

	.header .header-container {
		width: 100%;
		padding: 20rpx;
		position: fixed;
		top: 0;
		z-index: 20;
		box-sizing: border-box;
		background: #FFF;
		margin-top: 32rpx;
	}

	.header .header-placeholder {
		/*20pd * 2 + 80h*/
		height: 120rpx;
	}

	.header .header-placeholder.header-placeholder--270h {
		/*20pd * 2 + 80h + 130h + 20mb*/
		height: 270rpx;
	}

	.header .compose-assets {
		height: 130rpx;
		-webkit-background: $uni-other-color-main-linear;
		background: $uni-other-color-main-linear;
		border-radius: 20rpx;
		padding: 0 30rpx 0 40rpx;
		margin-bottom: 20rpx;
	}

	.header .compose-assets .img-compose {
		width: 50rpx;
		height: 50rpx;
	}

	.header .compose-title {
		color: #1c1c1c;
		font-weight: bold;
	}

	.header .compose-assets .btn-compose {
		width: 146rpx;
		height: 54rpx;
		background: rgba(255, 255, 255, .9);
		border-radius: 27rpx;
		text-align: center;
		line-height: 54rpx;
		font-size: 26rpx;
		color: $uni-text-color-main;
	}

	// .header .tab-list {
	// 	width: 80%;
	// 	margin: 0 auto;
	// 	display: flex;
	// 	justify-content: space-between;
	// 	height: 80rpx;
	// }

	.header .tab {
		height: 100%;
		line-height: 80rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #5f5f5f;
		position: relative;
		-webkit-transform: all 0.3s;
		transform: all 0.3s;
	}

	.header .tab:nth-child(n+2) {
		margin-left: 60rpx;
	}

	.header .tab.active {
		//color: $uni-text-color-inverse;

		font-size: 32rpx;
		color: #EE772B;
	}

	.header .tab.active::after {
		content: "";
		width: 44rpx;
		height: 7rpx;
		background: #EE772B;
		border-radius: 4rpx;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}

	.assetsBox {
		display: flex;
		justify-content: space-between;
		padding: 32rpx;
		box-sizing: border-box;
	}

	.assetsBox-left {
		width: 48%;

	}

	.assetsBox-right {
		width: 48%;

	}

	.assetsBox-item {
		margin-top: 20rpx;
		box-sizing: border-box;
		overflow: hidden;
		// background-color: #FFFFFF;
		/*避免在元素内部插入分页符*/
		break-inside: avoid;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
		// background-image: url(@/static/itemBg.png);
		background-size: 100% 100%;
		padding-bottom: 20rpx;
	}

	.goods__img-wrapper.multi:before,
	.goods__img-wrapper.multi:after {
		content: "";
		border-radius: 16rpx;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
	}

	// 藏品图大小
	.goods__img-wrapper {
		height: 346rpx;
		position: relative;
		margin-bottom: 20rpx;
	}

	.goods__img {
		width: 100%;
		height: 346rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
	}

	.assets-name {
		font-size: 32rpx;
		font-weight: 400;
		color: #000;
		font-weight: 600;
		margin-bottom: 18rpx;
		margin-left: 12rpx;

		display: flex;
	}

	.total_price {
		font-size: 30rpx;
		font-weight: bold;
		color: #EE772B;
		text-shadow: 0rpx 0rpx 8rpx rgba(214, 176, 90, 0.08);
	}

	.assets-bg {
		// width: 180rpx;
		// background-color: #D6B05A;
		display: flex;
		font-size: 26rpx;
		color: #000001;
		align-items: center;
		justify-content: space-between;

	}

	.assets_number {
		color: #ecc163;
		background-color: #2F2920;
		// line-height: 38rpx;
		// margin: 3rpx;
		// padding: 5rpx 10rpx;
		min-width: 90rpx;
		text-align: center;
	}

	.assets_numbera {
		margin-left: 10rpx;
		width: 55rpx;
		padding: 0 5rpx;
		display: flex;
		justify-content: center;
		background-color: #ecc163;
		font-size: 24rpx;
		white-space:nowrap;
	}

	.assets__num {
		border-radius: 20rpx;
		padding: 4rpx 16rpx;
		position: absolute;
		top: 16rpx;
		right: 16rpx;
		z-index: 4;

		color: #FB9206;
		background-color: rgba(0, 0, 0, 0.6);
	}

	.assets__type {
		position: absolute;
		background-color: rgba(0, 0, 0, 0.6);
		width: 100%;
		height: 100%;
		z-index: 5;

		font-size: 28rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.box {
		position: relative;
	}

	.data-item-name-icon {
		position: absolute;
		top: 0;
		right: 20rpx;
		width: 80rpx;
		height: 35rpx;

		.image {
			color: #000;
			font-size: 24rpx;
			padding-left: 10rpx;
			width: 100%;
			height: 100%;
			background: url('../../../static/upgradeImg.png') no-repeat;
			background-size: 100% 100%;

		}
	}

	.marker {
		margin-bottom: 10rpx;
		width: 100%;
		height: 35rpx;
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		.image {
			color: #000;
			
			padding-left: 10rpx;
			width: 80rpx;
			height: 100%;
			background: url('../../../static/upgradeImg.png') no-repeat;
			background-size: 100% 100%;
		}
	}
	.mask{
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.2);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}
	.detail-dialog{
		position: fixed;
		bottom: 0;
		width: 100%;
		min-height: 40vh;
		background: $uni-bg-color;
		color: $uni-text-color;
		z-index: 9999;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		
		.top{
			display: flex;
			position: relative;
			margin-bottom: 120rpx;
			.image{
				position: absolute;
				width: 200rpx;
				height: 200rpx;
				border-radius: 20rpx;
				top: -40%;
				img{
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
				}
			}
			.close{
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				color: $uni-text-color;
				font-size: 30rpx;
				font-weight: bold;
			}
			.info{
				margin-left: 240rpx;
				padding-top: 20rpx;
				.title{
					font-size: 38rpx;
				}
			}
		}
		.tip{
			color: $uni-text-color-grey;
		}
		.list{
			text-align: center;
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;
			overflow: scroll;
			max-height: 50vh;
			.list_item{
				position: relative;
				width: 200rpx;
				height: 180rpx;
				background: $uni-bg-color-grey;
				border-radius: 20rpx;
				text-align: center;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				display: inline-block;
				.price{
					font-size: 36rpx;
					font-weight: bold;
					margin-top: 50rpx;
					margin-bottom: 10rpx;
				}
				.number{
					font-size: 26rpx;
					font-weight: bold;
				}
			}
		}
	}
</style>
